import Taro, { Component } from '@tarojs/taro'
import { View, Text, ScrollView } from '@tarojs/components'
import classNames from 'classnames'
import { AtTabs, AtTabsPane, AtList, AtListItem, AtButton, AtIcon, } from "taro-ui"
import { DNavBar, DItemError } from '@/components'
import './usermenber.scss'
import http from '@/api'
export default class UserMenberBox extends Component {

    constructor(props) {
        super(props)
        this.state = {
            current: 0,
            obj: {},
            obj1: {
                page: 1,
                limit: 10,
                order: "",
                sidx: "",
            },
            page1: 1,
            page2: 1,
            page3: 1,
            scrollStyle: window.screen.availHeight,
            footerStatus: false,
            list: [],
            totalPage: 1,
            creatorId:''
        }
    }
    componentWillMount() {
        let creatorId = ''
        // alert(creatorId+'aaa'+133)
            if (localStorage.getItem('userInformation')) {
            let { infoEnterpriseEntity = '' } = JSON.parse(localStorage.getItem('userInformation'))
            creatorId = infoEnterpriseEntity.id 
            // alert('object-->'+infoEnterpriseEntity+'obj.id-->'+infoEnterpriseEntity.id)
            }
            this.setState({
                creatorId
            },()=>{
                // console.log(dsfUserEntity.id)
            })
        let { page, limit, sidx, order } = this.state.obj1
        let obj = {
            page,
            limit,
            sidx,
            order,
            entId: creatorId,
            imIsAppro: 1
        }
        this.myEmployeeList(obj)
    }
    handleClick(value) {
        if (value === 0) {
            let{creatorId} = this.state
            let { page, limit, sidx, order } = this.state.obj1
            let obj = {
                page,
                limit,
                sidx,
                order,
                entId: creatorId,
                imIsAppro: 1
            }
            this.setState({
                list: [],
                scrollStyle: window.screen.availHeight,
                page1: 1
            })
            this.myEmployeeList(obj)
        }
        if (value === 1) {
            let{creatorId} = this.state
            let { page, limit, sidx, order } = this.state.obj1
            let obj = {
                page,
                limit,
                sidx,
                order,
                entId: creatorId,
                imIsAppro: 0
            }
            this.setState({
                list: [],
                scrollStyle: window.screen.availHeight,
                page2: 1
            })
            this.myEmployeeList(obj)
        }
        if (value === 2) {
            let{creatorId} = this.state
            let { page, limit, sidx, order } = this.state.obj1
            let obj = {
                page,
                limit,
                sidx,
                order,
                entId: creatorId,
                approLog: 1
            }
            this.setState({
                list: [],
                scrollStyle: window.screen.availHeight,
                page3: 1
            })
            this.myEmployeeList(obj)
        }
        this.setState({
            current: value
        })
    }

    userDetail = (status, id) => {
        Taro.navigateTo({
            url: `/pages/usermenberdetail/usermenberdetail?status=${status}&id=${id}` // 1:审核 2:详情 
        })
    }

    myEmployeeList(obj) {
        let { totalPage } = this.state
        if (obj.page > totalPage) {
            this.setState({
                footerStatus: true
            })
            return
        }
        else {
            this.setState({
                footerStatus: false
            })
        }
        http.myEmployeeList(obj).then(res => {
            if (res.list && res.list.length > 0) {
                let { list } = this.state
                this.setState({
                    list: [...list, ...res.list],
                    totalPage: list.totalPage
                })
            }
        })
    }
    onScroll = () => {
        let { current, obj, page1, page2, page3 } = this.state
        if (current === 0) {
            let { id = 1 } = this.$router.params
            let { limit, sidx, order } = this.state.obj1
            this.setState({
                page1: page1 + 1,
            })
            obj = {
                page: page1,
                limit,
                sidx,
                order,
                entId: `${id}`,
            }
            this.myEmployeeList(obj)
        }
        if (current === 1) {
            let{creatorId} = this.state
            let { limit, sidx, order } = this.state.obj1
            this.setState({
                page2: page2 + 1,
            })
            obj = {
                page: page2,
                limit,
                sidx,
                order,
                entId: `${creatorId}`,
                approLog: 1
            }
            this.myEmployeeList(obj)
        }
        if (current === 2) {
            let{creatorId} = this.state
            let { limit, sidx, order } = this.state.obj1
            this.setState({
                page3: page3 + 1,
            })
            obj = {
                page: page3,
                limit,
                sidx,
                order,
                entId: `${creatorId}`,
                approLog: 1
            }
            this.myEmployeeList(obj)
        }
    }
    render() {
        const tabList = [{ title: '员工' }, { title: '待审核' }, { title: '审核记录' }]
        const {
            current,
            list,
            footerStatus,
            scrollStyle
        } = this.state
        const itemFirstHtml = () => {
            return <AtList>
                {
                    list.map((item, key) => {
                        return <AtListItem key={key} title={item.imName} arrow='right' onClick={this.userDetail.bind(this, 2, item.id)}></AtListItem>
                    })
                }
            </AtList>
        }
        const itemSecodeHtml = () => {
            return <View className='b_usermenber__content_secode'>
                {
                    list.map((item, i) => {
                        return <View className='b_usermenber__item' key={i}>
                            <View className='b_usermenber__item_status'>
                                <Text className='b_usermenber__item_status__name'>{item.imName}</Text>
                                <Text className='b_usermenber__item_status__item'>待审核</Text>
                            </View>
                            <View className='b_usermenber__item_phone'>联系方式：{item.imPhone}</View>
                            <View className='b_usermenber__item_addre'>申请加入{item.entName}</View>
                            <AtButton className='item_btn item_btn__default' onClick={this.userDetail.bind(this, 1, item.id)}>审核</AtButton>
                        </View>
                    })
                }
            </View>
        }

        const itemUserList = () => {
            return <View className='b_usermenber__content_three'>
                {
                    list.map((item, i) => {
                        return <View className='b_usermenber__three' key={i} onClick={this.userDetail.bind(this, 3, item.id)}>
                            <View className='b_usermenber__three_name'>
                                <View className='b_usermenber__three_name__left'>{item.imName}</View>
                                <View className='b_usermenber__three_name__right'>
                                    <Text className={classNames('item_text__status', item.imIsAppro === '1' ? '' : 'item_error__bg')}>{item.imIsAppro === '1' ? '已加入' : '未通过'}</Text>
                                    <AtIcon value='chevron-right' size='20' color='#999999'></AtIcon>
                                </View>
                            </View>
                            <View className='b_usermenber__three_telphone'>联系方式:{item.imPhone}</View>
                            <View className='b_usermenber__three_time'>审核时间:{item.approUpdateTime}</View>
                        </View>
                    })
                }
            </View>
        }
        return (
            <View className='b_usermenber'>
                <DNavBar title={'我的员工'}></DNavBar>
                <View className='b_usermenber__box'>
                    <View className='b_usermenber__content'>
                        <AtTabs current={current} tabList={tabList} onClick={this.handleClick.bind(this)}>
                            <AtTabsPane>
                                <ScrollView
                                    scrollY
                                    scrollWithAnimation
                                    lowerThreshold='20'
                                    style={`height:${scrollStyle - 50}PX`}
                                    onScrollToLower={this.onScroll}>
                                    {itemFirstHtml()}
                                    {
                                        footerStatus && <View className='b_companydetail__footer'>暂无更多</View>
                                    }
                                </ScrollView>
                            </AtTabsPane>
                            <AtTabsPane>    
                                <ScrollView
                                    scrollY
                                    scrollWithAnimation
                                    lowerThreshold='20'
                                    style={`height:${scrollStyle - 50}PX`}
                                    onScrollToLower={this.onScroll}>
                                    {itemSecodeHtml()}
                                    {
                                        footerStatus && <View className='b_companydetail__footer'>暂无更多</View>
                                    }
                                </ScrollView>
                            </AtTabsPane>
                            <AtTabsPane>
                                <ScrollView
                                    scrollY
                                    scrollWithAnimation
                                    lowerThreshold='20'
                                    style={`height:${scrollStyle - 50}PX`}
                                    onScrollToLower={this.onScroll}>
                                    {itemUserList()}
                                    {
                                        footerStatus && <View className='b_companydetail__footer'>暂无更多</View>
                                    }
                                </ScrollView>
                            </AtTabsPane>
                        </AtTabs>
                    </View>
                    {list.length === 0 && <DItemError></DItemError>}
                </View>
            </View>
        )
    }
}